<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogAudit.visible"
    :width="900"
    :title="dialogAudit.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions v-loading="loading" :column="2" border>
      <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
      <el-descriptions-item label="项目编号">{{ detailInfo.projectNum }}</el-descriptions-item>
      <el-descriptions-item label="缴纳主体名称">{{ detailInfo.paymentName }}</el-descriptions-item>
      <el-descriptions-item label="缴纳主体统一社会信用代码">{{ detailInfo.paymentCode }}</el-descriptions-item>
      <el-descriptions-item label="账户编号">{{ detailInfo.guaranteeAccountCode }}</el-descriptions-item>
      <el-descriptions-item label="收支方式">{{ detailInfo.guaranteeAccountTypeName }}</el-descriptions-item>
      <!-- 保证金账户 -->
      <el-descriptions-item v-if="dialogAudit.type == 1" label="缴存类型">{{
        detailInfo.depositeTypeName
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 1" label="应缴金额">{{
        detailInfo.payable
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 1" label="缴纳金额">{{ detailInfo.paid }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 1" label="差异化缴存金额">{{
        detailInfo.difference
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 1" label="缴存起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 1" label="附件">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div>
      </el-descriptions-item>
      <!-- 工程担保公司保函账户 -->
      <el-descriptions-item v-if="dialogAudit.type == 2" label="担保公司负责人">{{
        detailInfo.superintendent
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 2" label="负责人电话">{{
        detailInfo.superintendentMobile
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 2" label="保函函号">{{
        detailInfo.guaranteeLetterNo
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 2" label="担保金额">{{ detailInfo.paid }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 2" label="有效期起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 2" label="有效期终止日期">{{
        detailInfo.endDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 2" label="附件">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div>
      </el-descriptions-item>
      <!-- 工程保证保险 -->
      <el-descriptions-item v-if="dialogAudit.type == 3" label="保险公司负责人">{{
        detailInfo.superintendent
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 3" label="负责人电话">{{
        detailInfo.superintendentMobile
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 3" label="保险单号">{{
        detailInfo.guaranteeLetterNo
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 3" label="保单金额">{{ detailInfo.paid }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 3" label="有效期起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 3" label="有效期终止日期">{{
        detailInfo.endDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 3" label="附件">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div>
      </el-descriptions-item>

      <!-- 银行保函 -->
      <el-descriptions-item v-if="dialogAudit.type == 4" label="银行保函担保金额">{{
        detailInfo.payable
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 4" label="缴存类型">{{
        detailInfo.depositeTypeName
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 4" label="已缴纳金额">{{ detailInfo.paid }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 4" label="差异化缴纳金额">{{
        detailInfo.difference
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 4" label="有效期起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 4" label="有效期终止日期">{{
        detailInfo.endDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="dialogAudit.type == 4" label="附件">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-form
      ref="addOrEditFormRef"
      v-loading="loading"
      :model="formData"
      :rules="rules"
      label-width="160"
      size=""
      style="padding-top: 20px"
    >
      <el-row justify="start" class="d_left">
        <el-col v-if="detailInfo.status == 0" :span="24" class="">
          <el-form-item label="审批意见" prop="status" style="margin-bottom: 18px">
            <el-checkbox
              v-model="yesChecked"
              label="审批通过"
              @change="
                (value: boolean) => {
                  if (value) {
                    formData.status = 1;
                    noChecked = false;
                  } else formData.status = undefined;
                }
              "
            />
            <el-checkbox
              v-model="noChecked"
              label="审批不通过"
              @change="
                (value: boolean) => {
                  if (value) {
                    formData.status = -1;
                    yesChecked = false;
                  } else formData.status = undefined;
                }
              "
            />
          </el-form-item>
        </el-col>
        <el-col v-if="detailInfo.status === 0" :span="24" class="">
          <el-form-item label="操作原因说明" prop="checkReason">
            <el-input
              v-model="formData.checkReason"
              type="textarea"
              style="width: 100%"
              :row="3"
              placeholder="请说明其原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog_footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit">{{ dialogAudit.footBtn }}</el-button>
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ProjectGuaranteePaymentAuditForm } from "@/api/guarantee/types";
import { GetProjectGuaranteePayment, AuditProjectGuaranteePayment } from "@/api/guarantee/index";
import { FormRules } from "element-plus";

const props = defineProps({
  dialogAudit: {
    type: Object,
    default: () => ({
      visible: false,
      title: "开户审批",
      footBtn: "确认提交",
      id: 0,
      type: 1,
    }),
  },
});

const { dialogAudit } = toRefs(props);

const yesChecked = ref(false);
const noChecked = ref(false);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
const detailInfo = ref<any>({});
const formData = reactive<ProjectGuaranteePaymentAuditForm>({});
const addOrEditFormRef = ref(ElForm);

const rules = reactive<FormRules<ProjectGuaranteePaymentAuditForm>>({
  status: [{ required: true, message: "请选择审批意见", trigger: "blur" }],
  checkReason: [{ required: true, message: "请输入审核意见", trigger: "blur" }],
});

onMounted(() => {
  loading.value = true;
  GetProjectGuaranteePayment(dialogAudit.value.id)
    .then((res) => {
      Object.assign(detailInfo.value, res.data);
    })
    .finally(() => {
      loading.value = false;
    });
});

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  emit("sendClose", query);
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  addOrEditFormRef.value.resetFields();
  addOrEditFormRef.value.clearValidate();
  formData.id = undefined;
}

/**
 * 项目表单提交
 */
function handleSubmit() {
  addOrEditFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      formData.id = dialogAudit.value.id;
      AuditProjectGuaranteePayment(formData)
        .then((res) => {
          if (res.success) {
            closeDialog(true);
          } else {
          }
        })
        .finally(() => (loading.value = false));
    }
  });
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
